<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
    <link rel="stylesheet" href="./css/index.css">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="divHead">
        <img src="./images/user.png"  @click="toUserPage"/>
    </div>
    <div class="divTitle">
        <div class="divStatic">
            <img src="./images/logo.png" class="logo"/>
            <div class="divDesc">
                <div class="divName">菩提阁餐厅</div>
                <div class="divSend">
                    <span><img src="./images/time.png"/> 距离1.5km</span>
                    <span><img src="./images/money.png"/> 配送费6元</span>
                    <span><img src="./images/location.png"/> 预计时长12min</span>
                </div>
            </div>
        </div>
        <div class="divDesc">
            简介: 菩提阁中餐厅是菩提阁点餐的独立的品牌，定位“大众 化的美食外送餐饮”，旨为顾客打造专业美食。
        </div>
    </div>
    <main>
        <div class="type">
            <ul>
                <li v-for="(item,index) in typeList"
                    :class="{active: activeKey == index}">
                    <span @click="chooseLi(index)">{{item.typesName}}</span>
                </li>
            </ul>
        </div>
        <div class="info">
            <div class="info-list" v-for="item in infoList">
                <div class="img-product">
                    <div class="demo-image__preview">
                        <el-image
                                style="width: 15rem; height: 15rem"
                                :src="`/font/load/download?name=${item.img}`">
                        </el-image>
                    </div>
                </div>
                <div style="width: 100%;">
                    <div class="divName"><span style="font-size: 3rem;font-weight: bold">{{item.name}}</span></div>
                    <div class="describe"><p>{{item.describe}}</p></div>
                    <div class="num">月销20</div>
                    <div class="price">￥{{item.price}}</div>
                    <div style="float: right; line-height: 5rem;">
                        <template v-if="item.num > 0">
                            <el-input-number style="height: 6rem" v-model="item.num" @change="handleChange(item.num,item)" :min="0" :max="10"
                                             label="描述文字"></el-input-number>
                        </template>
                        <el-row>
                            <el-button
                                    v-show="item.num == null || item.num == 0"
                                    type="warning" round
                                    style="width: 13rem;height: 5rem;font-size: 2rem;border-radius: 50px"
                                    @click="addShop(item)">
                                选择规格
                            </el-button>
                        </el-row>
                    </div>

                </div>
            </div>
        </div>
    </main>
    <div class="bottom">
        <div class="bottom-info">
            <div class="bottom-left">
                <el-badge :value="shopCar.length" :hidden="shopCar.length == 0" class="item"
                          style="width: 10rem;height: 10rem;position: absolute;bottom: 0">
                    <el-image :src="shopCar.length ==0 ? `images/cart.png` : `images/cart_active.png`"
                              style="width: 12rem;height: 12rem;position: absolute;bottom: 0"></el-image>
                    <!--                    <img src="images/cart.png" style="width: 12rem;height: 12rem;position: absolute;bottom: 0">-->
                </el-badge>

            </div>
            <div class="bottom-right">
                <div style="float: left;color: white;font-size: 3rem;line-height: 8rem;">￥{{totalPrice}}</div>
                <el-row style="float: right;line-height: 9.25rem;padding-right:0.5rem ">
                    <el-button
                            :disabled="shopCar.length == 0"
                            type="warning" round
                            :style="shopCar.length != 0 ? `background-color: rgb(255, 190, 0);` : null"
                            style="width: 18rem;height: 7rem;font-size: 3rem;border-radius: 100px"
                            @click="payment">
                        去结算
                    </el-button>
                </el-row>
            </div>
        </div>
    </div>
    <!--  选择规格  -->
    <el-drawer
            :visible.sync="drawer"
            direction="btt"
            size="50%"
            :before-close="handleClose">

        <span style="font-size: 4rem">我来啦!</span>


    </el-drawer>
</div>
</body>
<script src="js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/interceptors.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: "#app",
        data: {
            totalPrice:0,
            shopNum:1,
            numShow:false,
            //抽屉展示
            drawer:false,
            oneInfo:{},
            shopCar: [],
            typeList: [],
            //菜品或者套餐信息
            infoList: [],
            activeKey: 0,

        },
        methods: {

            toUserPage(){
              location.href = "/font/page/order.html";
            },

            payment(){
                axios.post("/font/shop/save",this.shopCar)
                    .then(res =>{
                        if(res.data.code == 20011){
                            location.href="/font/page/pay.html";
                        }else {
                            this.$message.warning(res.data.message);
                        }
                    })
                    .catch(err =>{
                        this.$message.error("接口异常");
                    });
            },

            handleChange(value,info) {

                console.log(value);
                if(value != 0){
                    this.shopCar.forEach(item =>{

                        if (item.packageId == info.code || item.dishId == info.id){
                            item.num = value;
                        }

                    });

                }else {
                    this.numShow = false
                    for (let i = 0; i < this.shopCar.length; i++) {
                        let shop = this.shopCar[i];
                        if (shop.packageId == info.code || shop.dishId == info.id){
                            this.shopCar.splice(i,1);
                            break;
                        }
                    }
                }
                this.totalPrice = 0;
                this.shopCar.forEach(item =>{
                    this.totalPrice += item.price * item.num;

                });
                this.totalPrice = this.totalPrice.toFixed(2);
                console.log(this.shopCar)
                this.shopNum = 1;
            },

            handleClose(done) {
                done();
            },

            addShop(item) {
                this.numShow = true;
                item.num = 1;
                this.oneInfo.name = item.name;
                this.oneInfo.img = item.img;
                this.oneInfo.price = item.price;
                if (item.id == null){
                    this.oneInfo.packageId = item.code;
                }else {
                    this.oneInfo.dishId = item.id;
                }
                this.oneInfo.num = 1;
                this.shopCar.push(this.oneInfo);
                this.totalPrice = 0;
                this.shopCar.forEach(item =>{
                    this.totalPrice += item.price * item.num;

                });
                this.totalPrice = this.totalPrice.toFixed(2);
                this.oneInfo={},
                console.log(this.shopCar);
            },
            /**
             * 获取菜品和套餐
             */
            chooseLi(index) {
                this.activeKey = index;
                this.infoList = [];
                let bool = this.typeList[index].types.indexOf("菜品") != -1;
                let uri = ""
                bool ? uri = `/font/dish/list?id=${this.typeList[index].order}` : uri = `/font/package/list?id=${this.typeList[index].order}`;
                axios.get(uri)
                    .then(res => {
                        if (res.data.code == 20041) {
                            this.infoList = res.data.data;
                        } else {
                            this.$message.warning(res.data.message);
                        }
                    })
                    .catch(err => {
                        this.$message.error("发生错误！！！");
                    })

            },

            /**
             * 获取菜单列表
             */
            getTypesName() {
                axios.get("/font/classInfo/typesName")
                    .then(res => {
                        if (res.data.code == 20041) {
                            this.typeList = res.data.data;
                            this.chooseLi(this.activeKey);
                        }
                    })
                    .catch(err => {
                        this.$message.error("发生错误！！！");
                    })
            },


        },
        mounted() {

            // axios.interceptors.request.use(
            //     config => {
            //         if (localStorage.getItem('token')) {
            //             config.headers.token = localStorage.getItem('token');
            //         }
            //         return config;
            //     }, error => {
            //
            //         return Promise.reject(error);
            //
            //     });
            //
            // axios.interceptors.response.use((response) => {
            //     return response;
            // }, function (error) {
            //     if (401 === error.response.status) {
            //         window.location = '/font/page/login.html';
            //     } else {
            //         return Promise.reject(error);
            //     }
            // });
            this.getTypesName();

        },

    })

</script>
</html>